<template>
  <el-header class="admin-header">
    <div class="header-title">
      <span class="fz_16">轻备教育科技</span>
      <span class="fz_12">欢迎您使用轻备CRM</span>
    </div>
    <div class="header-bar">
      <div class="header-action">
        <el-dropdown placement="bottom-end" size="medium">
          <span class=" header-info">
            <el-avatar >U</el-avatar>
            <h4  class="mr-10 el-dropdown-link">张三</h4>
            
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div class="header-menu" >个人信息</div>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <div class="header-menu" @click="out">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  data() {
    return {
      appName: ` `,
    };
  },
  methods: {
    out(){
      this.$router.push("/login");
    }
  },
};
</script>

<style lang="scss">
.admin-header {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 10px 0;
  justify-content: space-between;
  background-color: #344762;
  color: #fff;
  box-sizing: border-box;
}
.header-title {
  width: 300px;
  text-align: center;
  .fz_16 {
    font-size: 16px;
    padding-right: 20px;
  }
  .fz_12{
    font-size: 12px;
    border-left: 1px solid #fff;
    padding-left: 20px;
  }
}
.header-bar {
  flex: auto;
  height: 100%;
  margin-right:30px ;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.header-action {
   height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 15px;

  .el-dropdown {
    cursor: pointer;
  }
}
.header-info {
  display: flex;
  align-items: center;
  h4{
    margin-left: 10px;
  }
}
.header-menu {
  width: 100px;
}
</style>
